<template>
  <div class="community">
    <div class="banner">
      <div class="forum">
        <van-image
          radius="1rem"
          width="4.5rem"
          height="4.5rem"
          :src="require('@/assets/snslogo.png')"
        />
        <div class="forum-title">
          <p class="p1">宠物社区</p>
          <p class="p2">论坛交友缘在于此</p>
        </div>
      </div>
    </div>
    <div class="post-content">
      <div class="post-top">
        <span class="topping">置顶</span>
        <span>我和小猫的日常生活</span>
      </div>
      <div class="post-top">
        <span class="topping">置顶</span>
        <span>我和小猫的日常生活</span>
      </div>
      <ul>
        <li
          v-for="item in dataList"
          :key="item.post_id"
          @click="gotoDetails(item.posts_id)"
        >
          <div class="post-head">
            <div class="avatar">
              <img :src="item.user_avatar" alt />
            </div>
            <div class="username">
              <p>{{ item.user_name }}</p>
              <p>发布于{{ item.createtime }}</p>
            </div>
          </div>
          <div class="content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.details_content }}</p>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <van-pagination
          v-model="currentPage"
          :total-items="total"
          :items-per-page="pageSize"
          @change="handleChangePagination"
        />
      </div>
    </div>
    <div class="write-post" @click="handleToPublish">
      <span>发布</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getForumList } from "@/api/forum";
import moment from "moment";
export default {
  name: "Sns",
  setup() {
    // 获取路由信息对象
    const router = useRouter();

    // 当前页
    const currentPage = ref(1);

    // 页面条数
    const pageSize = ref(10);

    // 总条数
    const total = ref();

    // 数据列表
    const dataList = ref([]);

    // 获取论坛列表数据
    const getForumData = () => {
      // 参数
      const query = {
        current: currentPage.value,
        pageSize: pageSize.value,
      };
      // 发送请求获取论坛列表
      getForumList(query)
        .then((res) => {
          res.data.forEach((item) => {
            item.createtime = moment(item.createtime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          dataList.value = res.data;
          total.value = res.total;
        })
        .catch((error) => {
          throw new Error(error);
        });
    };

    onMounted(() => {
      getForumData();
    });

    // 切换页码
    const handleChangePagination = (current) => {
      currentPage.value = current;
      getForumData();
    };

    // 跳转到论坛详情页面
    const gotoDetails = (id) => {
      router.push(`/sns/details/${id}`);
    };

    // 跳转到发布论坛页面
    const handleToPublish = () => {
      router.push("/publish/forum");
    };

    return {
      currentPage,
      pageSize,
      gotoDetails,
      dataList,
      total,
      handleChangePagination,
      handleToPublish,
    };
  },
};
</script>

<style lang="less" scoped>
.community {
  .banner {
    position: relative;
    height: 10rem;
    background-color: rgba(205, 92, 92, 0.5);
    .forum {
      position: absolute;
      width: 100%;
      height: 4.5rem;
      bottom: 2.5rem;
      .van-image {
        float: left;
        margin-left: 1.5rem;
      }
      .forum-title {
        float: left;
        height: 100%;
        margin-left: 0.5rem;
        p {
          margin: 0 0 0.5rem 0;
          color: #fff;
        }
        .p1 {
          font-size: 1.5rem;
        }
        .p2 {
          font-size: 1rem;
        }
      }
    }
  }
  .post-content {
    position: relative;
    bottom: 1rem;
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: #eee;
    margin-bottom: calc(50px - 1rem);
    overflow: hidden;
    .post-top {
      margin: 1rem 1rem;
      font-size: 0.9rem;
      .topping {
        color: #fff;
        padding: 0.2rem 0.3rem;
        background-color: plum;
        border-radius: 0.3rem;
        margin-right: 1rem;
        font-size: 0.7rem;
      }
    }
    li {
      margin: 0.5rem 0.5rem;
      padding-bottom: 1rem;
      background-color: #fff;
      border-radius: 1rem;
      .post-head {
        height: 2.5rem;
        padding: 1rem 0.5rem;
        .avatar {
          float: left;
          width: 2.5rem;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .username {
          float: left;
          height: 100%;
          width: calc(100% - 2.5rem);
          p {
            margin: 0.2rem 0 0 0.5rem;
          }
          p:first-child {
            font-size: 0.8rem;
          }
          p:last-child {
            font-size: 0.7rem;
            color: #ccc;
          }
        }
      }
      .content {
        padding: 0 1rem;
        h3 {
          margin: 0;
          font-size: 1.1rem;
          font-weight: 500;
          color: skyblue;
        }
        p {
          margin: 1rem 0 0 0;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 0.9rem;
        }
      }
    }
    .pagination {
      margin: 1rem 0 2.5rem;
      // margin: 1rem 0 2rem 0;
      background-color: #fff;
    }
  }
  .write-post {
    position: fixed;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: yellow;
    right: 3rem;
    bottom: 8rem;
    text-align: center;
    line-height: 4rem;
    box-shadow: 0px 0px 0.8rem 0.1rem #ccc;
  }
}
</style>
